<template>
<div class="guide">
	<div class="bg" @click="base.guideIndex == 7 ? close() :  getGuide(1)"></div>
	<div v-if="base.guideIndex == 2" class="btnAdd flexC">
		<i>新建对话</i>
		<span class="tie"></span>
		<span class="arrow"></span>
		<span class="line"></span>
	</div>
	<div v-if="base.guideIndex == 3" class="navBtn">
		<span class="tie"></span>
		<span class="arrow"></span>
		<span class="line"></span>
	</div>
	<img class="pic" :src="`${imgurl}pic.jpg`" v-if="base.guideIndex == 4"/>
	<div class="infoBox" v-if="base.guideIndex == 4">
	    <div class="clumn">
	        <span class="tell">{{ maskedPhone(phone) }}</span>
	        <div class="rate flexC">
	            <span class="num">{{ integral }}</span>
	            <span class="mate flexC">积分</span>
	        </div>
	        <span class="btn">积分兑换</span>
	        <span class="mark">【反馈内容获取积分】</span>
	    </div>
	    <ul class="infoList">
	        <li class="guanwang">丝网AI官网</li>
	        <li class="jiaoxue">新手指引</li>
	        <li class="gongneng">功能反馈</li>
	        <li class="out">退出登录</li>
	    </ul>
		
		<span class="tie"></span>
		<span class="arrow"></span>
		<span class="line"></span>
	</div>
	<div class="serchBox" v-if="base.guideIndex == 5">
		<input type="text" class="text" v-model="keyword" disabled placeholder="搜索历史记录"/>
		<span class="tie"></span>
		<span class="arrow"></span>
		<span class="line"></span>
	</div>
	<span class="guideTitle" v-if="base.guideIndex == 6">
		{{ base.sessionlist>0 ? base.sessionlist[0].title : '声屏障国家规范' }}
		<span class="tie"></span>
		<span class="arrow"></span>
		<span class="line"></span>
	</span>
	<div class="temBtn" v-if="base.guideIndex == 7">
		<span class="tie"></span>
		<span class="arrow"></span>
		<span class="line"></span>
	</div>
    <div :class="`guideCon ${baseclass}`" 
		:style="`${style}`"
	>
		<span class="close" @click="close"></span>
		<span class="count"><a>{{ base.guideIndex }}</a>/7</span>
		<span class="tit-1 show" v-if="base.guideIndex == 1">
			在这里可选择推荐问题<br/>
			或输入想咨询的内容
		</span>
		<span class="tit-2 show" v-if="base.guideIndex == 1">点击图标，WIRE AI快速帮你解答</span>
		<span class="tit-1 show" v-if="base.guideIndex == 2">
			在这里可新建对话窗口
		</span>
		<span class="tit-1 show" v-if="base.guideIndex == 3">
			在这里展开历史搜索问题
		</span>
		<span class="tit-1 show" v-if="base.guideIndex == 4">
			这里是参与内容反馈<br/>
			获得的积分
		</span>
		<span class="tit-2 show" v-if="base.guideIndex == 4">你可以用积分去兑换相应礼品或<br/>权益</span>
		<span class="tit-1 show" v-if="base.guideIndex == 5">
			在这里可快速搜索历史问题
		</span>
		<span class="tit-1 show" v-if="base.guideIndex == 6">
			在这里可对历史问题进行<br/>
			编辑
		</span>
		<span class="tit-2 show" v-if="base.guideIndex == 6">
			你可以点击相应按钮对问题置顶<br/>
			修改/删除
		</span>
		<span class="tit-1 show" v-if="base.guideIndex == 7">
			在这里可对内容进行反馈<br/>
			且获得积分
		</span>
		<span class="tit-2 show" v-if="base.guideIndex == 7">
			你可选择问题类型并点击其他输<br/>
			入建议<br/>
			也可上传文件或者图片进行反馈
		</span>
		<div class="cont">
			<img class="iconbg" :src="`${imgurl}guidebg.png`"/>
			<img class="icon" :src="`${imgurl}guide.gif`"/>
			<img class="img" v-if="base.guideIndex == 1" :src="`${imgurl}guide01_w.png`"/>
			<img class="img" v-if="base.guideIndex == 2" :src="`${imgurl}guide02_w.png`"/>
			<img class="img" v-if="base.guideIndex == 3" :src="`${imgurl}guide03_w.png`"/>
			<img class="img" v-if="base.guideIndex == 4" :src="`${imgurl}guide05.png`"/>
			<img class="img" v-if="base.guideIndex == 5" :src="`${imgurl}guide05_w.png`"/>
			<img class="img" v-if="base.guideIndex == 6" :src="`${imgurl}guide06_w.png`"/>
			<img class="img" v-if="base.guideIndex == 7" :src="`${imgurl}guide07_w.png`"/>
		</div>
		<div class="btnpage">
			<img class="btnPrev" v-if="base.guideIndex > 1" @click="getGuide(0)" :src="`${imgurl}guide_right.png`"/>
			<img class="btnNext" v-if="base.guideIndex <7" @click="getGuide(1)" :src="`${imgurl}guide_left.png`"/>
			<span class="nextBtn flexC" v-if="base.guideIndex == 7" @click="close">知道了</span>
		</div>
		<span class="triangle" v-if="base.guideIndex == 1"></span>
		<span class="line1" v-if="base.guideIndex == 1"></span>
		<span class="line2" v-if="base.guideIndex == 1"></span>
		<span class="line3" v-if="base.guideIndex == 1"></span>
    </div>
</div>

</template>

<script setup lang='ts'>
	const imgurl = import.meta.env.VITE_APP_TITLE+'/assets/images/';
	import { useUserStore } from "@/store/modules/user";
	import { useSystemStore } from "@/store/modules/system";
	const api = inject('$base', null as any);
	const useStore = useUserStore();
	const base = useSystemStore();
	const baseclass = ref<string>('');
	const style = ref<string>();
	const integral = ref<number>();
	const phone = ref<number>();
	const keyword = ref<string>();
	
	function getLeft(x:number){
		if(base.guideIndex == 1){
			return x;
		}
	}
	function getTop(y:number){
		if(base.guideIndex == 1){
			return y - 435;
		}
	}
	function getGuide(type:number){
		if(type == 0){
			base.guideIndex--;
		}else{
			base.guideIndex++;
		}
		baseclass.value = `guide${base.guideIndex}`;
		if(base.guideIndex == 2){
			base.isShowNav = false;
			style.value = `right:30px;top:105px`;
		}else if(base.guideIndex == 3){
			base.isShowNav = false;
			style.value = `right:20px;top:105px`;
		}else if(base.guideIndex == 4){
			base.isShowNav = false;
			style.value = `right:15px;top:310px;`;
		}else if(base.guideIndex == 5){
			base.isShowNav = true;
			style.value = `right:15px;top:205px;`;
		}else if(base.guideIndex == 6){
			base.isShowNav = true;
			style.value = `right:15px;top:270px;`;
		}else if(base.guideIndex == 7){
			base.isShowNav = false;
			let top = 734.5 * 0.7 - 260 ;
			style.value = `right:15px;top:${top}px;`;
		}else{
			style.value = `left:30px;bottom:330px;`;
		}
	}
	function close(){
		base.isShowGuide = false;
		base.guideIndex = 0;
		api.updatehelpstatus({id:useStore.userIds}).then(res=>{
			
		})
	}
	function maskedPhone(number:string) {
		if(number){
			const maskedMiddle = number.substring(3, 7).replace(/\d/g, '*');
			return number.substring(0,3) + maskedMiddle + number.substring(7);
		}
	}
	function memberinfo(){
	    api.memberinfo({ id : useStore.userIds }).then(res=>{
	        integral.value = res.data.integral;
			phone.value = res.data.phone;
	    })
	}
	onMounted(()=>{
		memberinfo();
		base.isShowNav = false;
		base.guideIndex = 1;
		style.value = `left:30px;bottom:330px;`;
	})
</script>
<style lang="scss" scoped>
    .guide{
        background:rgba(0,0,0,.5);
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        z-index:102;
		.bg{
			position:absolute;
			left:0;
			top:0;
			width:100%;
			height:100%;
		}
		&.g7{
			background:url(../../assets/images/tem05.png) no-repeat center 45px #e9f0fa;
			background-size:100% auto;
		}
		.btnAdd{
			color:#4955f5;
			width:75px;
			height:25px;
			cursor:pointer;
			background-image: linear-gradient(90deg, #99e3e0, #afcefe);
			border-radius:3px;
			font-family:'siyuanR';
			position: absolute;
			right:95px;
			top:10px;
			margin: 0;
			box-shadow:3px 1px 6px rgba(152,211,253,.4);
			z-index: 1001;
			i{
				position:relative;
				z-index:10;
				font-style:normal;
				background: linear-gradient(90deg, #0ac1ba, #2379ff); 
				-webkit-background-clip: text; 
				-webkit-text-fill-color: transparent;
				color: transparent;
				font-size:12px;
			}
			&::after{
				content:'';
				position: absolute;
				background:#fff;
				border-radius:3px;
				left:1px;
				top:1px;
				width:calc(100% - 2px);
				height:calc(100% - 2px);
			}
			
		}
		.arrow {
			width: 0;
			height: 0;
			border-bottom: 10px solid #4a90f5; 
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			position: absolute;
			top: 86px;
			left: 50%;
			margin-left:-7px;
		}
		.line{
			height: 65px;
			width:2px;
			position: absolute;
			top:25px;
			left:50%;
			background-image: linear-gradient(to top, #4a90f5, #fcfdfe);
		}
		.tie{
			position: absolute;
			bottom:-8px;
			left: 50%;
			background:url(../../assets/images/guide_btn.png) no-repeat;
			background-size:100%;
			width: 16px;
			height: 16px;
			margin-left: -8px;
			z-index:99;
		}
		.navBtn{
			width: 50px;
			height:45px;
			cursor: pointer;
			position: absolute;
			right:45px;
			background:url(../../assets/images/navBtn02.png) no-repeat center center;
			background-size:16px auto;
			.tie{
				bottom: 0;
			}
			.arrow{
				top:95px;
			}
			.line{
				top:45px;
			}
		}
		.pic{
			width: 32px;
			height: 32px;
			border-radius: 50%;
			right: 12px;
			top:6px;
			position: absolute;
			border: solid 1px #82adfc;
		}
		.infoBox{
		    width:264px;
		    position:absolute;
		    background:url(../../assets/images/userBg.png) no-repeat center top #fcfdfe;
		    background-size:100% auto;
		    box-shadow:0 0 7px rgba(166,182,229,.64);
		    border-radius:10px;
			top:55px;
			right:15px;
		    .clumn{
		        width:100%;
		        display:flex;
		        justify-content:space-between;
		        align-items:center;
		        padding:15px 10px 0 20px;
		        height:50px;
		        position:relative;
		        cursor:pointer;
				.tell{
				    position:absolute;
				    top:5px;
				    color:#fff;
				    font-size:12px;
				    left:20px;
				}
		        .mark{
		            position:absolute;
		            background:#ffffff;
		            color:#64b4fe;
		            font-size:12px;
		            line-height:26px;
		            top:-36px;
		            left:0;
		            display:none;
		            box-shadow:0 0 7px rgba(166,182,229,.64);
		            border-radius:5px;
		            padding:0 10px;
		            &::after{
		                width: 0;
		                height: 0;
		                border-left: 8px solid transparent;
		                border-right: 8px solid transparent;
		                border-top: 10px solid #fff;
		                position:absolute;
		                bottom:-5px;
		                content:'';
		                left:50%;
		                transform:translateX(-50%);
		            }
		        }
		        .rate{
		            color:#fff;
		            height:100%;
		            font-size:24px;
		            display:inline-block;
		            .num{
		                display:inline-block;
		                font-style:normal;
		                font-size:24px;
		                float:left;
		            }
		            .mate{
		                font-size:13px;
		                margin:0 5px;
						background:url(../../assets/images/icon_ts.png) no-repeat right center;
						background-size:12px 12px;
						padding-right:17px;
		                height:100%;
		                float:left;
		            }
		        }
		        .btn{
		            height:22px;
		            background:#faeedc;
		            color:#9e6d47;
		            font-size:10px;
		            border-radius:10px;
		            padding:0 8px;
		            line-height:22px;
		            cursor:pointer;
		        }
		    }
			.infoList{
			    width:100%;
			    font-size:13px;
			    color:#666;
			    li{
			        padding:0 20px 0 36px;
			        line-height:35px;
			        cursor:pointer;
			        transition:all .5s;
			        position:relative;
			        overflow:hidden;
					&.guanwang{
					    background:url(../../assets/images/icon011.png) no-repeat 16px center;
					    background-size:13px 13px;
					}
					&.jiaoxue{
					    background:url(../../assets/images/icon012.png) no-repeat 16px center;
					    background-size:14px 12px;
					}
					&.gongneng{
					    background:url(../../assets/images/icon03.png) no-repeat 16px center;
					    background-size:12px 14px;
					}
					&.out{
					    background:url(../../assets/images/icon010.png) no-repeat 16px center;
					    background-size:13px 11px;
					}
			    }
			}
			.tie{
				left: 200px;
			}
			.arrow{
				top:246px;
				left:200px;
			}
			.line{
				top:195px;
				left:200px;
			}
		}
		.serchBox{
			border-top:solid 1px #ecf0f4;
			border-bottom:solid 1px #ecf0f4;
			height:50px;
			background:url(../../assets/images/icon_search.png) no-repeat 25px center #f9f9f9;
			background-size:14px 14px;
			position:fixed;
			left: 0;
			top:95px;
			width:100%;
			z-index:1001;
			.text{
				width:100%;
				background:none;
				height:100%;
				padding:0 25px 0 50px;
				outline:none;
				color:#2379ff;
				font-size:15px;
				&::-webkit-input-placeholder {
					color:#b4bec9;
				}
			}
			.tie{
				left: 297px;
			}
			.arrow{
				left: 296px;
				top:100px;
			}
			.line{
				left: 296px;
				top:45px;
			}
		}
		.guideTitle{
			position: fixed;
			left:10px;
			top:155px;
			z-index:999;
			background:url(../../assets/images/tem04.png) no-repeat center right;
			background-size:auto 100%;
			width: calc(100% - 20px);
			border-radius: 5px;
			height: 49px;
			color: #267bf7;
			padding:0 90px 0 38px;
			line-height: 49px;
			white-space: nowrap;    
			text-overflow: ellipsis;
			.tie{
				left: 285px;
			}
			.arrow{
				top:105px;
				left:285px;
			}
			.line{
				top:49px;
				left:285px;
			}
		}
		.talktem{
			background:url(../../assets/images/tem05.png) no-repeat center top #e9f0fa;
			background-size:100% auto;
			position: absolute;
			left:0;
			width: 100%;
			top:45px;
			height: 100vh;
			z-index:0;
		}
		.temBtn{
			position: fixed;
			background:url(../../assets/images/tem03.png) no-repeat;
			background-size:100%;
			width: 84px;
			height: 23px;
			top:calc(734.5px * 0.7);
			margin-top: 45px;
			right:10px;
			z-index:1001;
			.tie{
				top:-8px;
				left:48px;
			}
			.arrow{
				top:-48px;
				left:47px;
				transform:rotate(180deg);
			}
			.line{
				top:-40px;
				left:47px;
				height:40px;
				background-image: linear-gradient(to bottom, #4a90f5, #fcfdfe);
			}
		}
    }
	
    .guideCon{
        background:#4a90f5;
        position:absolute;
        width:220px;
        height:auto;
        border-radius:10px;
		padding: 10px 0 30px 0;
		font-family: 'siyuanR';
		.close{
			background:url(../../assets/images/icon_close.png) no-repeat;
        	background-size:100% auto;
			width:15px;
			height:15px;
			position:absolute;
			right:-12px;
			top:-12px;
			cursor: pointer;
		}
		.count{
			position: absolute;
			right: 10px;
			top:10px;
			color:rgba(252,253,254,.8);
			font-size: 12px;
			a{
				color: #66e6b1;
			}
		}
		.tit-1{
			font-size: 14px;
			padding:0 15px;
			line-height:20px;
			font-family: 'siyuanM';
			position: relative;
			color: #fcfdfe;
			&::before{
				position: absolute;
				left: 10px;
				content: '';
				top:5px;
				width: 2px;
				height:14px;
				background:#fff;
			}
		}
		.tit-2{
			font-size: 12px;
			padding: 2px 10px;
			line-height: 16px;
			padding: 0 17px;
			color:rgba(252,253,254,.8);
			margin-top: 5px;
		}
		.cont{
			padding: 0 15px;
			position: relative;
			margin-top: 10px;
			.icon{
				position: absolute;
				left: 5px;
				top:-10px;
				width: 40px;
				height: 40px;
				z-index: 88;
			}
			.iconbg{
				position: absolute;
				left:5px;
				top:-10px;
				display: block;
				width: 40px;
				height: 40px;
			}
			.img{
				width: 100%;
				height: auto;
				// box-shadow:1px 3px 6px rgba(24,69,135,.24);
			}
		}
		.btnpage{
			width: 100%;
			padding: 0 15px;
			position: absolute;
			bottom: 10px;
			display: flex;
			justify-content: flex-end;
			.nextBtn{
				background: #ffffff;
				height: 16px;
				font-size: 10px;
				color: #4a90f5;
				border-radius: 15px;
				padding:0 12px;
				margin-left: 10px;
				cursor: pointer;
				box-shadow:1px 3px 6px rgba(24,69,135,.24);
			}
		}
		.btnPrev,
		.btnNext{
			width: 15px;
			height: 15px;
			margin-left: 15px;
			cursor: pointer;
		}
		
		.line1{
			background: #4a90f5;
			height: 2px;
			width: 20px;
			position: absolute;
			top: 126px;
			left: -20px;
		}
		.line2{
			height: 260px;
			width: 2px;
			position: absolute;
			top: 126px;
			left: -20px;
			background-image: linear-gradient(to bottom, #4a90f5, #5597f6);
		}
		
		&.guide2{
			.line3{
				top: -65px;
				width: 2px;
				height: 65px;
				left: 107px;
				background-image: linear-gradient(to top, #4a90f5, #fcfdfe);
			}
			.triangle {
				top: -8px;
				z-index: 99;
				left:100px;
				border-top: none;
				border-bottom: 10px solid #4a90f5; 
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
			}
		}
		&.guide3{
			.line3{
				top: -65px;
				width: 2px;
				height: 65px;
				left: 154px;
				background-image: linear-gradient(to top, #4a90f5, #fcfdfe);
			}
			.triangle {
				top: -8px;
				z-index: 99;
				left:147px;
				border-top: none;
				border-bottom: 10px solid #4a90f5; 
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
			}
		}
		&.guide4{
			.line3{
				top: -70px;
				width: 2px;
				height: 70px;
				left: 155px;
				background-image: linear-gradient(to top, #4a90f5, #fcfdfe);
			}
			.triangle {
				top: -8px;
				z-index: 99;
				left:148px;
				border-top: none;
				border-bottom: 10px solid #4a90f5; 
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
			}
		}
		&.guide5{
			.line3{
				top: -70px;
				width: 2px;
				height: 70px;
				left: 155px;
				background-image: linear-gradient(to top, #4a90f5, #fcfdfe);
			}
			.triangle {
				top: -8px;
				z-index: 99;
				left:148px;
				border-top: none;
				border-bottom: 10px solid #4a90f5; 
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
			}
		}
		&.guide6{
			.line3{
				top: -70px;
				width: 2px;
				height: 70px;
				left: 155px;
				background-image: linear-gradient(to top, #4a90f5, #fcfdfe);
			}
			.triangle {
				top: -8px;
				z-index: 99;
				left:148px;
				border-top: none;
				border-bottom: 10px solid #4a90f5; 
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
			}
		}
		&.guide7{
			height: 260px;
			.line3{
				top:260px;
				width: 2px;
				height: 70px;
				left: 192px;
				background-image: linear-gradient(to bottom, #4a90f5, #fcfdfe);
			}
			.triangle {
				top: 260px;
				z-index: 99;
				left:185px;
				border-bottom: none;
				border-top: 10px solid #4a90f5; 
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
			}
		}
    }
</style>